/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

  body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    font-family: "pingfang";
  }
  ion-button,ion-input,ion-select,ion-textarea{
    font-family: "pingfang";
  }
  span{
    font-family: "pingfang";
  }
  a{
    text-decoration: none;
    color: black;
  }
  html{
    font-size: 87.5%;
  }
  .clearfix{  
    &::after{
      display: block;
      content: "";
      height: 0px;
      clear: both;
    }
  }
  

  ul,ol{
    list-style-type: none;
  }


.titleFont{
    color: #15489B;
    font-size: 18px;
    padding: 0;
    float: left;
    width: 100%;
}
.titleFont>div:first-child{
    float: left;
    padding-left: 10px;
}
.titleFont>div:last-child{
    float: right;
    padding-right: 10px;
    width: 60px;
    :first-child{
        float: left;
    }
    :last-child{
        float: right;
    }
}

.clean_fix{  
  &::after{
    display: block;
    content: "";
    height: 0px;
    clear: both;
  }
}
// ion-header{
//   margin-top: 20px;
//   // background-color: #FFF;
// }

// ion-title{
//   margin-top: 20px;
// }
ion-header{
  ion-toolbar{
    // --background:red;
    --background:transparent;
    --padding-top:20px;
  }
}


ion-header{
  // background-color:red;
  background-color: #fff;
}

ion-header ion-toolbar:first-of-type {
  /* padding-top: var(--ion-safe-area-top, 20); */
  padding-top:20px;
}

.back_icon{
  font-size: 24px;
}
input{
  font-size: 12px !important;
}
.input-border-bottom{
  border-bottom: 1px solid #EFF0F5;
}
.form-error-item{
  font-size:12px;
  color: #F11020;
}
.customer-btn{
  background-color: #15489B;
  color: #FFF;
  font-size: 14px;
  border-radius: 2px;
}
.secondary-btn{
  border-color: #15489B;
  color: #15489B;
  border-radius: 2px;
}
.clean_padding{
  padding: 0px;
}
.icon {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
ion-backdrop,ion-picker,ion-picker-column{
  touch-action:none;
}
.label-item{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.customer_picker{
  color: #000!important;
  flex: unset!important;
}
.picker-toolbar div:nth-child(2){
  flex: unset!important;
}


.toggle_width{
  // width: 81px;
  width: 4.6em;
}
.toggle_on::before {
  position: absolute;
  // top: 10px;
  // left: 18px;
  top: 25%;
  left: 20%;
  content: "ON";
  color: white;
  font-size: 14px;
  z-index: 1;
  // display: none;
}

.toggle_off::after {
  position: absolute;
  // top: 10px;
  // right: 18px;
  top: 25%;
  right: 20%;
  content: "OFF";
  color: white;
  font-size: 14px;
  z-index: 1;
  // display: none;
}


.custom_modal{
  --height: 70vh !important;
  align-items: flex-end !important;
  --border-radius:5px 5px 0 0;
}

.pwd_icon{
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.selected_bank{
  --height: 70vh !important;
  align-items: flex-end !important;
  --border-radius:5px 5px 0 0;
}

.no_pwd_custom_modal{
  --height: 43vh !important;
  align-items: center !important;
  --width:80vw;
  --border-radius:5px;
}